﻿@page "/TheWeather/{Text?}"
@using WeatherCore.Lib
@using System.Text.RegularExpressions
@inject NotificationService _notice
@inject IJSRuntime Js

<PageTitle>@List.CityName - WeatherCore</PageTitle>

<Spin size="large" Spinning="@_spin">
    <GridRow>
        <GridCol Span="4"/>
        <GridCol Span="16">
            @if (!string.IsNullOrEmpty(List.CityName))
            {
                <Card class="Card">
                    <h2>@($"{DateTime.Now:yyyy年MM月dd日 HH:mm} , {List.CityName}")</h2>
                    <div class="centre">
                        <img height="50" width="50" src="WeatherIcon/@($"{List.Now.icon}.svg")" alt="@List.Now.text"/>
                        <p>@List.Now.text </p>
                        <p>@List.Now.temp ℃</p>
                    </div>

                    <Row Gutter="24">
                        <GridCol Span="4" Class="centre">
                            <h3>@List.Now.windScale 级</h3>
                            <p>@List.Now.windDir</p>
                        </GridCol>
                        <GridCol Span="4" Class="centre">
                            <h3>@List.Now.feelsLike ℃</h3>
                            <p>体感温度</p>
                        </GridCol>
                        <GridCol Span="4" Class="centre">
                            <h3>@List.Now.pressure hPa</h3>
                            <p>大气压</p>
                        </GridCol>
                        <GridCol Span="4" Class="centre">
                            <h3>@Air(List.Now.humidity)</h3>
                            <p>空气质量</p>
                        </GridCol>
                        <GridCol Span="4" Class="centre">
                            <h3>@List.Now.vis km</h3>
                            <p>能见度</p>
                        </GridCol>
                        <GridCol Span="4" Class="centre">
                            <h3>@List.Now.precip mm</h3>
                            <p>降水量</p>
                        </GridCol>
                    </Row>
                </Card>

                <Card class="Card">
                    <h2>接下来的24小时...</h2>
                    <br/>
                    <div class="scroll">
                        @foreach (var item in List.Hours)
                        {
                            <div class="item">
                                <p>@SimpleTimeConverter(item.fxTime!)</p>
                                <img src="WeatherIcon/@($"{item.icon}.svg")" style="height: 30px" alt="@item.text"/>
                                <p>@item.text @item.temp ℃</p>
                            </div>
                        }
                    </div>
                </Card>


                <Card class="Card">
                    <h2>之后几天</h2>
                    <br/>
                    <GridRow Gutter="(24, 32)">
                        @foreach (var item in List.Days)
                        {
                            <GridCol Span="8" Class="centre">
                                @SimpleDayConverter(item.fxDate)
                            </GridCol>
                            <GridCol Span="8" Class="centre">
                                <img height="30" width="30" src="WeatherIcon/@($"{item.iconDay}.svg")" alt=""/>
                            </GridCol>
                            <GridCol Span="8" Class="centre">
                                @item.tempMin / @item.tempMax ℃
                            </GridCol>
                        }
                    </GridRow>
                </Card>

                <Card class="Card">
                    <h2>日出而作 , 日落而息</h2>
                    <br/>
                    <GridRow>
                        <GridCol Span="8" Class="centre">
                            @List.Today.sunrise
                        </GridCol>
                        <GridCol Span="8" Class="centre">
                            <img height="30" width="30" src="WeatherIcon/@($"{List.Today.iconDay}.svg")" alt=""/>
                        </GridCol>
                        <GridCol Span="8" Class="centre">
                            @List.Today.sunset
                        </GridCol>
                    </GridRow>
                    <br/>
                    <div class="g-container">
                        <div class="g-progress" style="@($"width: {DateProgress(List.Today.sunrise, List.Today.sunset)}%")"></div>
                    </div>
                    <br/>
                    <Divider/>
                    <br/>
                    <GridRow>
                        <GridCol Span="8" Class="centre">
                            @List.Today.moonrise
                        </GridCol>
                        <GridCol Span="8" Class="centre">
                            <img height="30" width="30" src="WeatherIcon/@($"{List.Today.moonPhaseIcon}.svg")" alt=""/>
                        </GridCol>
                        <GridCol Span="8" Class="centre">
                            @List.Today.moonSet
                        </GridCol>
                    </GridRow>
                    <br/>
                    <div class="g-container">
                        <div class="g-progress" style="@($"width: {DateProgress(List.Today.moonrise, List.Today.moonSet)}%")"></div>
                    </div>
                </Card>

                <Card class="Card">
                    <h2>我们有些建议...</h2>
                    <br/>
                    <Row Gutter="(24, 8)">
                        @foreach (var item in List.Today.Suggestions)
                        {
                            <GridCol Span="6">
                                <div @onclick="@(() => SuggestionClick(item))">
                                    <Card Style="text-align: center" Hoverable>
                                        @item.name
                                    </Card>
                                </div>
                            </GridCol>
                        }
                    </Row>
                </Card>
            }
            else
            {
                <Skeleton Class="Card" Active="true"/>
            }
        </GridCol>
        <GridCol Span="4">
            <BackTop Style="margin-bottom:60px" Icon="vertical-align-top"/>
        </GridCol>
    </GridRow>
</Spin>

<Modal Title="@Suggestion.name"
       @bind-Visible="@_visible"
       Footer="@null">
    <h2>@Suggestion.category</h2>
    <p>@Suggestion.text</p>
</Modal>

@code
{
    bool _visible;
    bool _spin = true;
    private WeatherSuggestion Suggestion { get; set; } = new();

    [Parameter] public string? Text { get; set; }

    private WeatherList List { get; set; } = new();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        var loc = Weather.DefaultCity;
        if (!string.IsNullOrEmpty(Text))
        {
            var locations = await Weather.GetLoc(Text);
            var l = locations.FirstOrDefault();
            if (l != null) loc = l;
            else
            {
                await _notice.Open(new NotificationConfig()
                {
                    Message = "是这样的",
                    Description = $"{Text}这个结果,搜是搜不到一点"
                });
            }
        }
        else
        {
            var result = await Js.InvokeAsync<string>("getCoords");
            var locations = await Weather.GetLoc(result);
            var l = locations.FirstOrDefault();
            if (l != null) loc = l;
            else
            {
                await _notice.Open(new NotificationConfig()
                {
                    Message = "是这样的",
                    Description = $"{Text}这个结果,搜是搜不到一点"
                });
            }
        }

        List = await Weather.GetData(loc);
        _spin = false;
        StateHasChanged();
    }
    
    private static string Air(string? s)
    {
        if (!int.TryParse(s, out var i)) return s ?? "";
        string[] strings = { "优", "良", "轻微污染", "轻度污染", "中度污染", "重度污染" };
        var index = i / 50;
        index = index > 4 ? index - 1 : index;
        index = index > 5 ? 5 : index;
        return $"{strings[index]} {s}";
    }
}

@code
{
    private string SimpleDayConverter(string s)
    {
        if (string.IsNullOrEmpty(s)) return s;
        var match = Regex.Match(s, "(.*)-(.*)-(.*)");
        return match.Groups.Count < 4 ? s : $"{match.Groups[2]}月{match.Groups[3]}日";
    }

    string SimpleTimeConverter(string s)
    {
        if (string.IsNullOrEmpty(s)) return s;
        var match = Regex.Match(s, "(.*)T(.*)\\+(.*)");
        return match.Groups.Count < 3 ? s : match.Groups[2].Value;
    }

    private int DateProgress(string start, string end)
    {
        if (string.IsNullOrEmpty(start) || string.IsNullOrEmpty(end)) return 100;

        var now = DateTime.Now;
        var startDate = DateTime.Parse(start);
        var endDate = DateTime.Parse(end);
        var total = endDate - startDate;
        var nowProgress = now - startDate;
        var totalMin = total.TotalMinutes;
        if (totalMin < 0)
            totalMin = 24 * 60 - totalMin;
        var result = (int)(nowProgress.TotalMinutes / totalMin * 100);
        return result > 100 ? 100 : result;
    }

    private void SuggestionClick(WeatherSuggestion suggestion)
    {
        Suggestion = suggestion;
        _visible = true;
    }
}

<style>
.Card {
    margin: 10px;
    border: 0 solid;
    border-radius: 10px;
    padding: 15px;
    animation: fade-in 1s ease-in-out;
}

.centre {
    text-align: center;
    margin: auto;
    font-size: 16px;
}

h1, h2 {
    font-weight: bold;
}

.scroll {
    text-align: center;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.scroll::-webkit-scrollbar {
    display: none;
}

.item {
    width: 100px;
    height: 50px;
    display: inline-block;
}
.g-container {
    height: 10px;
    border-radius: 10px;
    background: #eee;
}
.g-progress {
    height: inherit;
    border-radius: 10px;
    background: dodgerblue;
    transition: width .2s linear;
}
</style>